<!-- 普通模式演示(vue) -->
<template>
  <view class="base-paging">
    <z-paging ref="paging" v-model="dataList" :auto="auto" :fixed="fixed" @query="queryList">
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
      <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
      <template v-if="tabs.length > 0" #top>
        <view v-if="isCustTop" class="paging-top-bg">
          <image src="@/static/top_logo.png" mode="aspectFit" :style="'margin-top:' + (topDis + 10) + 'px' " />
          <z-tabs :active-style="{ fontSize: '1.01em', fontWeight: 'bold', color: '#333333'}"
                  :list="tabs.map(val => val.title || val.name || val.label)"
                  active-color="#1763FC"
                  bg-color="rgba(0, 0, 0, 0)"
                  class="table"
                  @change="tabChange"/>

        </view>
        <template v-else>
          <view class="paging-top-bg" style="height: 80rpx">
            <z-tabs :active-style="{ fontSize: '1.2em', fontWeight: 'bold', color: '#333333'}"
                    :list="tabs.map(val => val.title || val.name || val.label)"
                    active-color="#1763FC"
                    @change="tabChange"/>
          </view>
        </template>
      </template>
      <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
      <slot :list="dataList" name="default"/>
    </z-paging>
    <uni-fab v-if="addFad" ref="fab" horizontal="right" vertical="bottom"
             @fab-click="() => $emit('fadClick')"/>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {type: Array, default: () => []},
    datasource: {type: Function, required: true},
    addFad: {type: Boolean, default: false},
    isCustTop: {type: Boolean, default: false},
    auto: {type: Boolean, default: false},
    fixed: {type: Boolean, default: true}
  },
  emits: ['fadClick'],
  data() {
    return {
      // v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
      dataList: [],
      tabIndex: 0,
	  topDis: uni.getStorageSync('topDis')
    }
  },
  computed: {
    curTab() {
      return this.tabs[this.tabIndex];
    }
  },
  methods: {
    reload() {
      this.$refs.paging.reload();
    },
    tabChange(index) {
      this.tabIndex = index;
      // 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
      this.$refs.paging.reload();
    },
    queryList(pageNo, pageSize) {
      this.datasource({pageNo, pageSize, tab: {...this.curTab}}).then(res => {
        // 将请求的结果数组传递给z-paging
        this.$refs.paging.complete(res?.data?.rows);
      }).catch(res => {
        // 如果请求失败写this.$refs.paging.complete(false);
        // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
        // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
        this.$refs.paging.complete(false);
      })
    }
  }
}
</script>

<style lang="scss">
.base-paging {
  position: relative;
  height: 100%;

  .z-tabs-conatiner {
    background-color: red;
  }

}

.paging-top-bg {
  width: 100vw;

  background-image: url(@/static/top_bg.png);
  background-size: 100% 100%;
  z-index: -1000;

  image {
    // margin-top: 100rpx;
    margin-left: 30rpx;
    width: 250rpx;
    height: 60rpx;
  }
}

.z-tabs-item.data-v-0ac4bf81 {
  padding-right: 0rpx !important;
  background: red !important;
}
</style>
